<template>
  <div class="app-container">
    <MmvTitle :title="type == 1 ? '交车验车' : '还车验车'"></MmvTitle>
    <el-form ref="form" :model="form" :rules="rules" label-width="0px">
      <el-descriptions class="margin-top margin-bottom" :column="3" border>
        <el-descriptions-item label-class-name="my-descriptions-label" label="车辆油量">
          <el-form-item prop="fuelCapacity" style="min-width: 300px">
            <el-slider v-model="form.fuelCapacity" style="width: 72%;display: inline-block;margin: 0 20px" :max="16"
              show-stops></el-slider>
            <div style="display: inline-block;overflow: hidden">{{ form.fuelCapacity }}/16</div>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" label="车辆公里数">
          <el-form-item prop="vehicleMileage">
            <el-input v-model="form.vehicleMileage" placeholder="请输入车辆公里数" style="width:220px;margin-right:15px"
              @keyup.native="form.vehicleMileage = oninput(form.vehicleMileage, 4)"></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" label="验车时间">
          <el-form-item prop="takeAlsoTime">
            <el-date-picker v-model="form.takeAlsoTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
              style="width:220px;margin-right:15px"></el-date-picker>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" label="车辆随车物品">
          <el-form-item prop="accessoryItems">
            <el-checkbox-group v-model="form.accessoryItems">
              <template v-for="item in dict.type.car_accessories">
                <el-checkbox :key="item.id" :label="item.label" :value="item.value"></el-checkbox>
              </template>
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" v-if="type == 2" label="费用信息">
          <el-table :data="alsoCarItems" border>
            <el-table-column label="收费项名称" prop="deductionsFor">
              <template slot-scope="{ row }">
                <el-input v-model="row.deductionsFor" :readonly="row.costIdentification != 4 ? true : false" ></el-input>
              </template>
            </el-table-column>
            <!--          <el-table-column label="收费类型" align="center">-->
            <!--            <template slot-scope="{ row }">-->
            <!--              <el-select v-model="row.chargeItemsType" clearable style="width: 360px">-->
            <!--                <el-option label="按次" :value="1"></el-option>-->
            <!--                <el-option label="按天" :value="2"></el-option>-->
            <!--                <el-option label="按里程" :value="3"></el-option>-->
            <!--              </el-select>-->
            <!--            </template>-->
            <!--          </el-table-column>-->
            <el-table-column label="扣款金额">
              <template slot-scope="{row}">
                <el-input v-model="row.deductionsAmount" placeholder="请输入金额"
                  @keyup.native="row.deductionsAmount = oninput(row.deductionsAmount, 2)"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="{ row }">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteChargingItems(row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24" style="text-align: center">
            <el-button icon="el-icon-plus" @click="addChargingItems">添加收费项</el-button>
          </el-col>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" label="车身照片">
          <ImageUpload isArray v-model="form.bodyImage" :isShowTip="false" :limit="10" :zoom="0.6"></ImageUpload>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" label="仪表盘/油表">
          <ImageUpload isArray v-model="form.panelImage" :isShowTip="false" :limit="10" :zoom="0.6"></ImageUpload>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" label="内饰照片">
          <ImageUpload isArray v-model="form.interiorImage" :isShowTip="false" :limit="10" :zoom="0.6"></ImageUpload>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" label="车辆划痕">
          <ImageUpload isArray v-model="form.scratchImage" :isShowTip="false" :limit="10" :zoom="0.6"></ImageUpload>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" label="验车视频">
          <ImageUpload isArray v-model="form.videoUrls" :isVideo="true" :isShowTip="false" :limit="1" :zoom="0.6">
          </ImageUpload>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" label="客户签名">
          <ImageUpload isArray v-model="form.signImage" :isShowTip="false" :limit="10" :zoom="0.6"></ImageUpload>
        </el-descriptions-item>

        <el-descriptions-item label-class-name="my-descriptions-label" :span="3" label="其他描述">
          <el-form-item prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入其他描述" maxlength="200"
              show-word-limit></el-input>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div class="footer custom_card_0" style="position: fixed;bottom: 50px;right: 50px;">
<!--      <el-button v-if="type == 2" @click="handleJiaocheyanchelist()">交车验车单</el-button>-->
      <el-button type="info" plain @click.native="close">取消</el-button>
      <el-button v-if="type == 1" :loading="btnloadIng" type="primary" @click="submit()"
        >保存
<!--        v-hasPermi="['order:orderBasic:delivery']"-->
      </el-button>
      <el-button v-if="type == 2" :loading="btnloadIng" type="primary" @click="submit()"
        >保存
      </el-button>
    </div>
    <el-drawer title="交车验车单" :visible.sync="showjiaocheyanchelist" direction="rtl" size="30%">
      <MmvDeliveryList ref="MmvDeliveryList" v-if="showjiaocheyanchelist" :orderNo="orderNo" :type="1"></MmvDeliveryList>
    </el-drawer>
  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload/index.vue';
import CustomContent from "@/components/custom/content";
import MmvTitle from "@/components/MmvUI/MmvTitle";
import MmvDeliveryList from "@/views/order/orderBasic/delivery-detail";
import {charteredDelivery} from "@/api/charteredBus/detail";
export default {
  name: "CharteredBusDelivery",
  components: {
    ImageUpload,
    CustomContent,
    MmvTitle,
    MmvDeliveryList,
  },
  dicts: ['delivery_type', 'car_accessories', 'charge_type'],
  // props: ['orderNo', 'type'],
  data() {
    return {
      orderNo: '',//订单编号   必传
      type: 1,//类型(1交车验车,2还车验车)   必传
      btnloadIng: false,
      showjiaocheyanchelist: false,
      form: {
        fuelCapacity: '',//车辆油量
        vehicleMileage: '',//公里数
        accessoryItems: [],//车辆随车物品(逗号隔开)
        remark: '',//其他描述
        takeAlsoTime: this.parseTime(new Date()),//取还车时间
        lkosten: 0.0,//补充油费(还车验车)
        bodyImage: [], //车身照片
        panelImage: [],//仪表盘
        interiorImage: [], //内饰照片
        scratchImage: [],//车辆划痕
        videoUrls: [],//验车视频
        signImage: []//客户签名
      },
      rules: {
        fuelCapacity: [{
          required: true,
          message: '车辆油量不能为空',
          trigger: 'change'
        }, {
          pattern: /^[0-9]+(.[0-9]{1,2})?$/,
          message: '车辆油量数输入不正确',
          trigger: 'blur',
        }],
        vehicleMileage: [{
          required: true,
          message: '公里数不能为空',
          trigger: 'change'
        }, {
          pattern: /^[0-9]+(.[0-9]{1,2})?$/,
          message: '公里数输入不正确',
          trigger: 'blur',
        }],
        takeAlsoTime: [{
          required: true,
          message: '取还车时间不能为空',
          trigger: 'change'
        }]
      },
      alsoCarItems: [], // 收费项列表
    };
  },
  computed: {
    formData() {
      const formData = {
        orderNo: this.orderNo,//订单编号   必传
        type: this.type,//类型(1交车验车,2还车验车)   必传
        fuelCapacity: this.form.fuelCapacity,//车辆油量
        vehicleMileage: this.form.vehicleMileage,//公里数
        accessoryItems: String(this.form.accessoryItems),//车辆随车物品(逗号隔开)
        remark: this.form.remark,//其他描述
        takeAlsoTime: this.form.takeAlsoTime,//取还车时间
        lkosten: this.form.lkosten,//补充油费(还车验车)
        bodyImage: this.form.bodyImage, //车身照片
        panelImage: this.form.panelImage,//仪表盘
        interiorImage: this.form.interiorImage, //内饰照片
        scratchImage: this.form.scratchImage,//车辆划痕
        videoUrls: this.form.videoUrls,//验车视频
        signImage: this.form.signImage,//客户签名
      };
      if (this.type == 2) {
        formData.cost = this.alsoCarItems.map(val => {
          return {
            deductionsFor: val.deductionsFor,
            deductionsAmount: val.deductionsAmount,
            deductionsWay: val.deductionsWay,
            costIdentification: val.costIdentification,
            chargeItemsId: val.chargeItemsId ,
          };
        });
      }
      return formData;
    },
  },
  mounted() {
    this.type = this.$route.query.type
    this.orderNo = this.$route.query.orderNo
  },
  methods: {
    /** 交车验车单 */
    handleJiaocheyanchelist() {
      this.showjiaocheyanchelist = true
    },
    addChargingItems() {
      this.alsoCarItems.push({
        chargeItemsName: '',
        chargeItemsType: 1,
        deductionsAmount: 0,
        checked: false,
        deductionsFor: '',
        deductionsWay: '2',
        costIdentification:4,
        index: new Date().getTime(),
      })
    },
    deleteChargingItems(row) {
      const index = this.alsoCarItems.map(f => f.index).indexOf(row.index);
      this.alsoCarItems.splice(index, 1)
    },
    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.btnloadIng = true;
          charteredDelivery(this.formData).then(response => {
            if (response.code == 200) {
              this.$message.success(response.msg);
              this.close();
            } else {
              this.btnloadIng = false;
              this.$message.error(response.msg);
            }
          }).catch(err => {
            this.btnloadIng = false;
          });
        }
      })

    },
  },
}
</script>
<style scoped>
/deep/ .el-slider__button-wrapper {
  z-index: 1 !important;
}
/deep/ .my-descriptions-label {
  width: 150px !important;
  text-align: center !important;
}
</style>
